<script lang="ts" setup>
import {onLoad, onReachBottom} from "@dcloudio/uni-app";
import {ref} from "vue";
import type {UserMsgDetail} from "@/types/user";
import {getUserMsgDetailApi} from "@/api/user";
import {formatTimeDifference} from "@/utils/time";
import {useUserStore} from "@/stores/user";

const userStore = useUserStore()
const title = ref('')
const type = ref<0 | 1 | 2>(0) // 当前信息类型
const isLoading = ref(false)
const isNoMore = ref(false) //  是否没有更多数据
const page = ref(1)
const pageSize = ref(10)
const isEmpty = ref(false) // 是否为空

const {safeAreaInsets} = uni.getSystemInfoSync()
onLoad(async (option) => {
  title.value = option?.title
  type.value = Number(option?.type) as 0 | 1 | 2
  await getUserMsgDetailList()
})
onReachBottom(async () => {
  page.value++
  await getUserMsgDetailList()
})
// 获取用户信息列表
const msgList = ref<UserMsgDetail[]>([])
const newMsgList = ref<UserMsgDetail[]>([]) // 用户未读消息列表
const getUserMsgDetailList = async () => {
  if (isNoMore.value || isEmpty.value) {
    return uni.showToast({
      title: '没有更多数据了',
      icon: 'none'
    })
  }
  if (isLoading.value) return
  isLoading.value = true
  let res: any
  try {
    res = await getUserMsgDetailApi(page.value, pageSize.value, type.value)
  } catch (e) {
  }
  isLoading.value = false
  if (msgList.value.length === 0) {
    msgList.value = res.data?.data
        ? res.data?.data
        : []
    newMsgList.value = msgList.value.filter((item: UserMsgDetail) => !item.read)
  } else {
    msgList.value = [...msgList.value, ...res.data.data]
    newMsgList.value = msgList.value.filter((item: UserMsgDetail) => !item.read)
  }
  isEmpty.value = msgList.value?.length <= 0
  if (page.value * pageSize.value >= res.data?.total) {
    isNoMore.value = true
  }
}
// 跳转到详情页
const goDetail = (item: UserMsgDetail) => {
  if (item.animalId!<10000000&&item.animalId!>1000){
    uni.navigateTo({
      url: '/subPkg/detail/detail?id=' + item.animalId
    })
  }else {
    uni.navigateTo({
      url: '/subPkg/picDetail/picDetail?id=' + item.animalId
    })
  }

}

// 跳转到用户主页
const goUserHomepage = (userId: number) => {
  const type = userStore.userInfoData?.userID === userId ? 0 : 1
  uni.navigateTo({url: '/subPkg/userHomepage/userHomepage?type=' + type + '&userId=' + userId})
}
</script>

<template>
  <view style="position:fixed;top: 0;left: 0;right: 0;z-index: 999;">
    <aw-nav-second :title="title"></aw-nav-second>
  </view>
  <view class="msg-box" style="background: #FFFFFF;min-height: 100vh" :style="{paddingTop:safeAreaInsets?.top+50+'px'}">
    <view v-if="type===0||type===1" class="msg-list">
      <view v-if="newMsgList?.length>0" class="flex justify-between padding-sm"
            style="border-bottom: #e6e6e6 1px solid">
        <text class="text-black">最新消息</text>
      </view>
      <view v-for="(item,index) in newMsgList" :key="item.name" class="msg-list-item" @tap="goDetail(item)">
        <view class="msg-common msg-avatar">
          <uv-avatar :src="item.avatar" mode="aspectFill" size="48"></uv-avatar>
        </view>
        <view class="msg-common msg-content ">
          <view class="msg-content-item  text-sm" style="color: #6b6d71">
            <text>
              <text style="font-weight: bold;margin-right: 2px">
                {{ item.sendId === userStore.userInfoData?.userID ? '我自己' : item.name }}
              </text>
              <text>
                {{ item.type === 0 ? '赞了我的评论' : item.uploader ? '评论了我的上传' : '回复了我的评论' }}
              </text>
            </text>
          </view>
          <view class="text-black text-df reply-text">{{ item.content }}</view>
          <view :style="{marginTop:item.type===0?'10px':''}" class="msg-content-text text-gray" style="font-size: 10px">
            {{
              formatTimeDifference(Date.parse(item.createTime), Date.now())
            }}
          </view>
        </view>
        <view class="msg-common msg-notice">
          <view v-if="item.uploader" style="width: 50px;height: 50px">
            <uv-image :src="item.animalImg" height="100%" radius="8" width="100%"></uv-image>
          </view>
          <text v-else class="comment-text text-gray ">
            {{ item.comment }}
          </text>
        </view>
      </view>
      <view v-if="newMsgList?.length>0&&newMsgList?.length!==msgList?.length" class="flex justify-between padding-sm"
            style="border-bottom: #e6e6e6 1px solid">
        <text class="text-black padding-top-sm">历史消息</text>
      </view>
      <view v-for="(item,index) in msgList.filter(item=>item.read)" :key="index" class="msg-list-item"
            @tap="goDetail(item)">
        <view class="msg-common msg-avatar" @click.stop="goUserHomepage(item.sendId)">
          <uv-avatar :src="item.avatar" mode="aspectFill" size="48" ></uv-avatar>
        </view>
        <view class="msg-common msg-content ">
          <view class="msg-content-item  text-sm" style="color: #6b6d71">
            <text>
              <text style="font-weight: bold;margin-right: 2px">
                {{ item.sendId === userStore.userInfoData?.userID ? '我自己' : item.name }}
              </text>
              <text>
                {{ item.type === 0 ? '赞了我的评论' : item.uploader ? '评论了我的上传' : '回复了我的评论' }}
              </text>
            </text>
          </view>
          <view class="text-black text-df reply-text">{{ item.content }}</view>
          <view :style="{marginTop:item.type===0?'10px':''}" class="msg-content-text text-gray" style="font-size: 10px">
            {{
              formatTimeDifference(Date.parse(item.createTime), Date.now())
            }}
          </view>
        </view>
        <view class="msg-common msg-notice">
          <view v-if="item.uploader" style="width: 50px;height: 50px">
            <uv-image :src="item.animalImg" height="100%" radius="8" width="100%"></uv-image>
          </view>
          <text v-else class="comment-text text-gray ">
            {{ item.comment }}
          </text>
        </view>
      </view>
      <view v-if="msgList?.length>0" class="text-gray flex justify-center margin-top-lg padding-bottom-lg"
            style="width: 100%">没有更多了哟~ヾ(≧▽≦*)o
      </view>
    </view>
    <view v-if="type===2" class="bg-white  padding-top-sm">
      <view v-if="newMsgList?.length<=0" class="flex justify-between padding-sm"
            style="border-bottom: #e6e6e6 1px solid">
        <text class="text-black" style="padding-left: 10px">全部消息</text>
      </view>
      <view v-if="newMsgList?.length>0" class="flex justify-between padding-sm"
            style="border-bottom: #e6e6e6 1px solid">
        <text class="text-black">最新消息</text>
      </view>
      <view v-for="(item,index) in newMsgList" :key="item.name"
            class="flex align-start flex-column justify-center"
            style="border-bottom: #e6e6e6 1px solid;gap: 10px;padding: 10px 10px 10px 20px">
        <view class="text-lg text-black text-bold">{{ item.title }}</view>
        <view class="text-df text-gray comment-text">{{ item.content }}</view>
        <view class="text-sm flex justify-end align-center" style="color: #999999;width: 100%">
          {{ formatTimeDifference(Date.parse(item.createTime), Date.now()) }}
        </view>
      </view>
      <view v-if="newMsgList?.length>0&&newMsgList?.length!==msgList?.length" class="flex justify-between padding-sm"
            style="border-bottom: #e6e6e6 1px solid">
        <text class="text-black">历史消息</text>
      </view>
      <view v-for="(item,index) in msgList.filter(item=>item.read)" :key="index"
            class="flex align-start flex-column justify-center"
            style="border-bottom: #e6e6e6 1px solid;gap: 10px;padding: 10px 10px 10px 20px">
        <view class="text-lg text-black text-bold">{{ item.title }}</view>
        <view class="text-df text-gray comment-text">{{ item.content }}</view>
        <view class="text-sm flex justify-end align-center" style="color: #999999;width: 100%">
          {{ formatTimeDifference(Date.parse(item.createTime), Date.now()) }}
        </view>
      </view>
      <view v-if="msgList?.length>0" class="text-gray flex justify-center margin-top-lg padding-bottom-lg"
            style="width: 100%">没有更多了哟~ヾ(≧▽≦*)o
      </view>
    </view>
    <view v-if="isLoading" style="width: 100%;padding-top: 100px;background: #FFFFFF">
      <aw-loader></aw-loader>
    </view>
    <view v-if="isEmpty&&msgList.length===0" class="flex justify-center align-center bg-white flex-column"
          style="width: 100%;height: 60vh">
      <uv-image height="160px" src="/static/empty-comment.png" width="160px"></uv-image>
      <view class="text-gray flex justify-center margin-top-sm" style="width: 100%">这里还没消息哟~(≧∇≦)ﾉ</view>
    </view>
  </view>
</template>

<style lang="scss" scoped>
.msg-box {
/*  padding-top: 160rpx;
  !* #ifdef H5 *!
  padding-top: 100rpx;
  !* #endif *!*/
}

.msg-list {
  padding-top: 20rpx;
  background-color: #fff;
  width: 100%;

  &-item {
    width: 100%;
    min-height: 160rpx;
    max-height: 180rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 10rpx;
    border-bottom: #e6e6e6 1px solid;

    .msg-common {
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 8px 0 10px 0;
    }

    .msg-avatar {
      align-items: flex-start;
      flex: 2;
    }

    .msg-content {
      flex: 6;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      justify-content: space-between;
      gap: 3px;
    }

    .msg-notice {
      flex: 2;
      //border-bottom: #e6e6e6 1px solid;
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      justify-content: flex-start;
      padding: 0 20rpx 0 20px;
      gap: 10rpx;
    }
  }
}

.comment-text {
  width: 100%;
  height: 100%;
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  word-wrap: break-word;
  white-space: normal !important;
  -webkit-line-clamp: 3;
  line-height: 1rem;
  -webkit-box-orient: vertical;
  font-size: 12px;
  letter-spacing: 1px;
}

.reply-text {
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  word-wrap: break-word;
  white-space: normal !important;
  -webkit-line-clamp: 2;
  line-height: 1.2rem;
  -webkit-box-orient: vertical;
  font-size: 12px;
  letter-spacing: 1px;
}
</style>
